<template>
  <el-tabs v-model="activePanel" type="card" @tab-click="handleClick">
    <el-tab-pane label="待处理预约" name="pending">
        <div class="app-button-container">
            <el-button type="primary" @click="dialogFormVisible = !dialogFormVisible">登记预约</el-button>
            <el-button type="primary" @click="dialogFormVisible = !dialogFormVisible">手术宣教</el-button>
        </div>
        
        <complex-table :filterContainer = "filterContainer" :list = 'pendingList' :theadList = "theadList"></complex-table>
        <el-dialog title="预约登记" :visible.sync="dialogFormVisible">
            <el-form :model="form" :inline="true">
                <el-form-item label="就诊卡号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入卡后"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入身份证"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.gender" placeholder="请选择性别" style = 'width: 188.6px'>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约手术" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请预约手术" style = 'width: 188.6px'>
                        <el-option label="预约1" value="appointment1"></el-option>
                        <el-option label="预约2" value="appointment2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手术名称" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择手术" style = 'width: 188.6px'>
                        <el-option label="手术1" value="surgery1"></el-option>
                        <el-option label="手术2" value="surgery2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手术日期" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择手术" style = 'width: 188.6px'>
                        <el-option label="手术1" value="surgery1"></el-option>
                        <el-option label="手术2" value="surgery2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="家属信息" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入家属姓名"></el-input>
                </el-form-item>
                <el-form-item label="与本人关系" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择手术" style = 'width: 188.6px'>
                        <el-option label="本人" value="surgery1"></el-option>
                        <el-option label="父亲" value="surgery2"></el-option>
                        <el-option label="母亲" value="surgery3"></el-option>
                        <el-option label="兄弟" value="surgery4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家属电话" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="已处理预约" name="done">
        已处理预约
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import { pending } from '@/api/appointmentManage'
  export default {
    components: { complexTable },
    data() {
      return {
        activePanel: 'pending',
        dialogFormVisible: false,
        form: {
          name: '',
          gender: '1',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        filterContainer: {},
        pendingList: [],
        theadList: [
          {
            label: 'name',
            text: '姓名'
          },
          {
            label: 'age',
            text: '年龄'
          },
          {
            label: 'gender',
            text: '性别'
          },
          {
            label: 'ID',
            text: '身份证号'
          },
          {
            label: 'doctor',
            text: '手术医生'
          },
          {
            label: 'surgery',
            text: '手术'
          },
          {
            label: 'expectTime',
            text: '拟预约时间'
          },
          {
            label: 'telephone',
            text: '电话'
          },
          {
            label: 'origin',
            text: '预约来源'
          }
        ]
      }
    },
    mounted() {
      pending().then((res) => {
        this.listLoading = false
        this.pendingList = res.data.data.result
      })
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>